<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no,viewport-fit=cover">
		<meta name="format-detection" content="telephone=no">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="stylesheet" href="../../css/common.css" />
		<link rel="stylesheet" href="../../css/product/detail.css" />
		<script type="text/javascript" src="../../js/common/plus_common.js"></script>
		<script type="application/javascript" src="../../js/common/static_common.js"></script>
	</head>
	<body>
		<span id="app" v-cloak>
			<header>
				<div class='nvbt iback' onclick='Jump.back()'></div><div class='nvtt'>商品详情</div>
			</header>
			<div class="_div data-v-2c0b1644 container">
				<div class="_scroll-view data-v-2c0b1644" data-comkey="0" data-eventid="7" scroll-into-view="" scroll-y="" style=" height:100%;">
					<ul class="_ul data-v-2c0b1644 tab" :style="{opacity:tab_opacity}">
						<li class="_li data-v-2c0b1644 tab-item" data-comkey="0" data-eventid="0-0" @click="go('banner',1)">
							<div class="_div data-v-2c0b1644 msg" :class="{active:point==1}"> 商品 </div>
						</li>
						<li class="_li data-v-2c0b1644 tab-item" data-comkey="0" data-eventid="0-1" @click="go('evaluation',2)">
							<div class="_div data-v-2c0b1644 msg" :class="{active:point==2}"> 详情 </div>
						</li>
						<li class="_li data-v-2c0b1644 tab-item" data-comkey="0" data-eventid="0-2" @click="go('goods_detail',3)">
							<div class="_div data-v-2c0b1644 msg" :class="{active:point==3}"> 评价 </div>
						</li>
					</ul>
					<div class="_div data-v-2c0b1644 banner" id="banner" style="overflow-x: hidden;">
						<div autoplay="" class="_swiper data-v-2c0b1644" duration="500" indicator-dots="" interval="2000 ">
							<div class="_swiper-item data-v-2c0b1644" style="position: absolute; height: 750px; transition: transform .5s ease;overflow-x: hidden;"
							 v-bind:style="{width: (picWidth*banners.length)+'px',transform: 'translate('+translate+'px, 0px) translateZ(0px) '}">
								<img class="_image data-v-2c0b1644 slide-image" :style="{width:picWidth+'px'}" v-for="(item,index) in banners" :src="imgUrl+item" @touchstart='touchStart' 
									@touchend='touchEnd($event,item,index)'/>
							</div>
						</div>
						<div class="_div data-v-2c0b1644 btns clearfix">
							<div class="_div data-v-2c0b1644 btn collect" data-comkey="0" data-eventid="1" @click="collect()">
								<img class="_img data-v-2c0b1644 image" mode="widthFix" :src="isCollect?'../../images/proj-detail/shoucanghou@2x.png':'../../images/proj-detail/shoucang--huidi@2x.png'" />
							</div>
							<button class="_button data-v-2c0b1644 btn share" open-type="share" onclick="shareWeb()"></button>
						</div>
					</div>
					<div class="_div data-v-2c0b1644 goods-info">
						<div class="_div data-v-2c0b1644 price">
							<div class="_div data-v-2c0b1644 rmb-group">
								<div class="_div data-v-2c0b1644 icon">￥</div>
								{{product.price + product.points}}
							</div>
							<div class="_div data-v-2c0b1644 fen-group" v-if="product.points>0">
								<div class="_div data-v-2c0b1644 icon">积分可抵￥</div>
								{{product.points}}
							</div>
						</div>
						<div class="_div data-v-2c0b1644 old-price clearfix">
							<div class="_div data-v-2c0b1644 old">原价 {{product.originPrice}}</div>
							<div class="_div data-v-2c0b1644 kuaidi">快递:0.00</div>
							<div class="_div data-v-2c0b1644 sales">销量 {{product.salesCount}}</div>
						</div>
					</div>
					<div class="_div data-v-2c0b1644 goods-name_djs">{{product.name}}</div>
					<div class="_div data-v-2c0b1644 goods-description_djs">{{product.remark}}</div>
					<div class="_div data-v-2c0b1644 label clearfix">
						<ul class="_ul data-v-2c0b1644 label_list clearfix">
							<li class="_li data-v-2c0b1644 label_item">
								<img class="_img data-v-2c0b1644 img" mode="widthFix" src="../../images/jifenshangcheng/gouxuan@2x.png" />

								自营
							</li>
							<li class="_li data-v-2c0b1644 label_item">
								<img class="_img data-v-2c0b1644 img" mode="widthFix" src="../../images/jifenshangcheng/gouxuan@2x.png" />

								保税区直供
							</li>
							<li class="_li data-v-2c0b1644 label_item">
								<img class="_img data-v-2c0b1644 img" mode="widthFix" src="../../images/jifenshangcheng/gouxuan@2x.png" />

								质量保证
							</li>
						</ul>
					</div>
					<div class="_div data-v-2c0b1644 specification clearfix" data-comkey="0" data-eventid="5" @click="openChoose()">
						<div class="_div data-v-2c0b1644 tip">商品规格</div>
						<div class="_div data-v-2c0b1644 selection">{{mall_text}}</div>
						<img class="_img data-v-2c0b1644 icon" mode="widthFix" src="../../images/proj-detail/xiayibu@2x.png" />
					</div>
					<ul class="_ul data-v-2c0b1644 evaluation" id="evaluation">
						<div class="_div data-v-2c0b1644 header clearfix">
							<div class="_div data-v-2c0b1644 left">评价（{{evalTotal}}）</div>
							<a class="_a data-v-2c0b1644 right" @click="toEvalPage()">
								全部评价
								<img class="_img data-v-2c0b1644 icon" mode="widthFix" src="../../images/jifenshangcheng/chakanquanbu@2x.png" />
							</a>
						</div>
						<div class="_div data-v-9637ce1c container evaluat" v-if="evals.length>0">
							<ul class="_ul data-v-9637ce1c evaluation_list">
								<li class="_li data-v-9637ce1c eva_item" v-for="item in evals">
									<div class="_div data-v-9637ce1c userInfo clearfix">
										<div class="_div data-v-9637ce1c left clearfix">
											<div class="_div data-v-9637ce1c user_logo">
												<img class="_img data-v-9637ce1c img" mode="widthFix" :src="item.photoPath?item.photoPath:defaultPhotoPath" />
											</div>
											<div class="_div data-v-9637ce1c user_board">
												<h3 class="_h3 data-v-9637ce1c">{{item.nickName}}</h3>
												<div class="_div data-v-9637ce1c right"> {{item.time}} </div>
											</div>
										</div>
										<div class="_div data-v-9637ce1c score">
											<img class="_img data-v-9637ce1c star" mode="widthFix" src="../../images/proj-detail/pingxing-liang@2x.png"
											 v-for="k in item.score" />
											<img class="_img data-v-9637ce1c star" mode="widthFix" src="../../images/proj-detail/pingxing-hui@2x.png"
											 v-for="l in (5-item.score)" />
											<span class="_span data-v-9637ce1c num">{{item.score}}分</span>
										</div>
									</div>
									<div class="_div data-v-9637ce1c eva_content"> {{item.content}} </div>
									<ul class="_ul data-v-9637ce1c img_list clearfix" v-if="item.path">
										<li class="_li data-v-9637ce1c img_item" data-comkey="0,1" data-eventid="0-4-0" v-for="item in item.path.split(',')">
											<img class="_img data-v-9637ce1c img" mode="widthFix" :src="imgUrl+item" />
										</li>
									</ul>
								</li>
							</ul>
						</div>
					</ul>
					<div class="_div data-v-2c0b1644 goods-detail" id="goods_detail">
						<div class="_div data-v-2c0b1644 header clearfix">
							<div class="_div data-v-2c0b1644 left">上滑查看图文详情</div>
						</div>
						<div class="_div data-v-2c0b1644 imgsbox">
							<img class="_img data-v-2c0b1644 imgs" mode="widthFix" v-for="i in product.detailPath.split(',')" :src="imgUrl+i" />
						</div>
					</div>
				</div>
				<div class="_div data-v-2c0b1644 btn-group">
					<div class="_div data-v-2c0b1644 left">
						<div class="_div data-v-2c0b1644 call" @click="call()">
							<img class="_img data-v-2c0b1644 image" mode="widthFix" src="../../images/proj-detail/kefu@2x.png" />
							<div class="_div data-v-2c0b1644 msg">咨询</div>
							<button class="_button data-v-2c0b1644 contact" open-type="contact"></button>
						</div>
						<div class="_div data-v-2c0b1644 shop-car" @click="toShopCar()">
							<img class="_img data-v-2c0b1644 image" mode="widthFix" src="../../images/jifenshangcheng/gouwuche@2x.png" />

							<div class="_div data-v-2c0b1644 msg">购物车</div>
							<label class="_span data-v-2c0b1644 mall_num" v-if="mall_num>0">{{mall_num}}</label>
							<button class="_button data-v-2c0b1644 userinfo-btn"></button>
						</div>
					</div>
					<button class="_button data-v-2c0b1644 right" @click="openChoose()">加入购物车</button>
				</div>
				<div class="_div data-v-2c0b1644 mask" v-if="isShow && choose.logoPath">
					<div class="_div data-v-2c0b1644 mallbox">
						<div class="_div data-v-2c0b1644 mall_box">
							<div class="_div data-v-2c0b1644 title" @click="isShow=false">
								<span class="_span data-v-2c0b1644 close" data-comkey="0" data-eventid="10">×</span>
							</div>
							<div class="_div data-v-2c0b1644 mallInfo">
								<img class="_img data-v-2c0b1644 mallImg" :src="imgUrl+choose.logoPath.split(',')[0]" />

								<div class="_div data-v-2c0b1644 right">
									<div class="_div data-v-2c0b1644 mall_row1">
										<span class="_span data-v-2c0b1644 money_cent">￥</span>
										{{choose.price}}
										<span class="_span data-v-2c0b1644" style="color:#444" v-if="choose.points>0"> + </span>
										<span class="_span data-v-2c0b1644 orange" v-if="choose.points>0">
											<span class="_span data-v-2c0b1644 money_cent">积分</span>
											{{choose.points}}
										</span>
									</div>
									<div class="_div data-v-2c0b1644 mall_row2">原价 {{choose.originPrice}}</div>
									<div class="_div data-v-2c0b1644 mall_row3">
										<span class="_span data-v-2c0b1644">{{mall_text}}</span>
										<span class="_span data-v-2c0b1644" style="margin-left:50px;" v-if="salesCount!=null">剩余库存 {{salesCount}} 件</span>
									</div>
								</div>
							</div>
							<div class="_scroll-view data-v-2c0b1644" scroll-y="" style=" height:200px;">
								<div class="_div data-v-2c0b1644 dv">
									<p class="_p data-v-2c0b1644 mall_choose">规格</p>
									<ul class="_ul data-v-2c0b1644 mall_type">
										<li class="_li data-v-2c0b1644 mall_style" :class="{active:item.active}" v-for="item in productModels" @click="changeModel(item)">{{item.name}}</li>
									</ul>
								</div>
							</div>
							<div class="_div data-v-2c0b1644 choose">
								数量
								<div class="_div data-v-2c0b1644 num">
									<span class="_span data-v-2c0b1644 numBtn" data-comkey="0" data-eventid="13" @click="reduceCount()">-</span>
									<span class="_span data-v-2c0b1644 num_mid">{{count}}</span>
									<span class="_span data-v-2c0b1644 numBtn" data-comkey="0" data-eventid="14" @click="addCount()">+</span>
								</div>
							</div>
						</div>
						<button class="_button data-v-2c0b1644 comfirmBtn" data-comkey="0" data-eventid="15" open-type="getUserInfo"
						 @click="addShopCar()" v-if="salesCount==null || salesCount>0">加入购物车</button>
						<button class="_button data-v-2c0b1644 over" v-if="salesCount==0">已售罄</button>
					</div>
				</div>
			</div>
		</span>
	</body>
	<script type="application/javascript" src="../../js/product/detail.js"></script>
	<script>
		var shares = null;
		var sweixin = null;
		var buttons = [{
				title: '我的好友',
				extra: {
					scene: 'WXSceneSession'
				}
			},
			{
				title: '朋友圈',
				extra: {
					scene: 'WXSceneTimeline'
				}
			}
		];
		// H5 plus事件处理
		function plusReady() {
			updateSerivces();
		}
		if (window.plus) {
			plusReady();
		} else {
			document.addEventListener('plusready', plusReady, false);
		}
		/**
		 * 更新分享服务
		 */
		function updateSerivces() {
			plus.share.getServices(function(s) {
				shares = {};
				for (var i in s) {
					var t = s[i];
					shares[t.id] = t;
				}
				sweixin = shares['weixin'];
			}, function(e) {
				outSet('获取分享服务列表失败：' + e.message);
			});
		}
	
		// 分享网页
		function shareWeb() {
			login._2page();
			var msg = {
				type: 'web',
				thumbs: [imgUrl+detailVue.product.logoPath.split(',')[0]]
			};
			var userData = localStorage.getItem("user_data");
			var userId = "";
			if(userData){
				userId = userData.userId;
			}
			msg.href = "https://mjz.yitavc.com:88/mjzapp/html/mine/share_get.html?shareUserId="+userId;
			msg.title = "新人注册领100积分 享积分购物";
			content = detailVue.product.name+"\n"+detailVue.product.remark+"\n"
			msg.content = content;
			sweixin ? plus.nativeUI.actionSheet({
				title: '分享网页到微信',
				cancel: '取消',
				buttons: buttons
			}, function(e) {
				(e.index > 0) && share(sweixin, msg, buttons[e.index - 1]);
			}) : $(document).dialog({
				type:'confirm',
				titleText:"分享商品",
				position:'center',
				content:"亲！请使用app或者小程序分享唷！立即下载app？",
				buttonTextConfirm:"想要",
				buttonTextCancel:"算了",
				onClickConfirmBtn:function(){
					window.location.href="https://app.meijiangzi.com/static/mjzapp.html";
				},
			});
		}
	
		// 分享
		function share(srv, msg, button) {
			console.log('分享操作：');
			if (!srv) {
				outLine('无效的分享服务！');
				return;
			}
			button && (msg.extra = button.extra);
			// 发送分享
			if (srv.authenticated) {
				console.log('---已授权---');
				doShare(srv, msg);
			} else {
				console.log('---未授权---');
				srv.authorize(function() {
					doShare(srv, msg);
				}, function(e) {
					console.log('认证授权失败：' + JSON.stringify(e));
				});
			}
		}
		// 发送分享
		function doShare(srv, msg) {
			console.log(JSON.stringify(msg));
			srv.send(msg, function() {
				console.log('分享到"' + srv.description + '"成功！');
			}, function(e) {
				console.log('分享到"' + srv.description + '"失败: ' + JSON.stringify(e));
			});
		}
		// 解除授权
		function cancelAuth() {
			console.log('解除授权：');
			if (sweixin) {
				if (sweixin.authenticated) {
					console.log('取消"' + sweixin.description + '"');
				}
				sweixin.forbid();
			} else {
				console.log('当前环境不支持微信分享操作!');
			}
		}
	</script>
</html>
